<template>
	<div id="regist">
		<div class = "logo">
			<img src="src/assets/image/logo.png" alt="">
		</div>
		<div class = "title">
			钱 呢
		</div>
		<div class = "describeText">
			任 何 时 间  都 是 起 点
		</div>
		<!-- 用户表单 -->
		<input type="text" class = "username" placeholder="请输入用户名" v-model = "username">
		<input type="password" class = "password" placeholder="请输入密码" v-model = "password">
		<input type="password" class = "re-password" placeholder="请再次输入密码" v-model = "rePsw">
		<!-- 登陆按钮 -->
		<div class="button" @click = "regist">
			注册
		</div>
		<div class="loginTips">
			已有账号？直接<router-link to="/login"><span>登陆</span></router-link>
		</div>
		<mu-toast v-if="toast" :message = "tips"   @close="hideToast"/>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				username: "",
				password: "",
				rePsw: "",
				tips: "",
				toast: false,
			}
		},
		methods:{
			regist:function(){
				//检验密码
				var pswReg = /^[a-zA-Z0-9_]+$/

				if(this.username === ""){
					this.tips = "用户名不能为空"
					this.showToast()
					return false;
				}
				else if(this.password === ""){
					this.tips = "密码不能为空"
					this.showToast()
					return false;
				}
				else if(!pswReg.test(this.password) || this.password.length < 6){
					this.tips = "密码必须为6位英文或数字"
					this.showToast()
					return false;
				}
				else if(this.password !== this.rePsw) {
					this.tips = "密码不一致"
					this.showToast()
					return false;
				}
				else{
					//登录验证
					this.$http.get('http://127.0.0.1/Vue/account/service/regist.php', {
						params: {
			              username: this.username,
			              password: this.password
			            }
					    }).then(function(res){
					    	console.log(res)
					        if(res.data === "1"){
					        	this.tips = "注册成功"
								this.showToast()
								return true;
					        }
					        else if(res.data === "0"){
					        	this.tips = "用户名重复"
								this.showToast()
								return false;
					        }
					        else if(res.data === "2"){
					        	this.tips = "数据库错误"
								this.showToast()
								return false;
					        }
					});
				}
			},
			showToast () {
		        this.toast = true
		         if (this.toastTimer) clearTimeout(this.toastTimer)
		        this.toastTimer = setTimeout(() => { this.toast = false }, 2000)
		    },
			hideToast () {
		        this.toast = false
		        if (this.toastTimer) clearTimeout(this.toastTimer)
		    }
		}
	} 
</script>
<style scoped>
	#regist{
		text-align: center;
		padding: 3vh 0 0 0;
	}
	.logo>img{
		width: 45%;
		height: auto;
		/* padding-bottom:  */
	}
	.title{
		font-size: .5rem;
		color: #333;
		padding-bottom: 1vh;
	}
	.describeText{
		font-size: .2rem;
		color: #666;
		padding-bottom: 4vh;
	}
	.username,.password,.re-password{
		display: inline-block;
		width: 80%;
		border:1px solid #5DCDBF;
		height: 45px;
		border-radius: 15px;
		margin-bottom: 3vh;
		padding: 0 2vh; 
		-webkit-appearance: none;
	}
	.re-password{
		margin-bottom: 6vh;
	}
	.button{
		display: inline-block;
		height: 45px;
		width: 80%;
		border-radius: 15px;
		background-color: #5DCDBF;
		color: white;
		line-height: 45px;
		font-size: .3rem;
		margin-bottom: 3vh;
	}
	.loginTips{
		color: #666;
		margin-bottom: 3vh;
	}
	.loginTips span{
		color: #333;
		text-decoration: underline;
	}
</style>